import { Card, Col, Row, Typography } from "antd";
import classNames from "classnames";
import _ from "lodash";
import { Link } from "react-router";

import React, { useEffect, useState } from "react";

import "./index.less";

const { Title, Paragraph } = Typography;

const Home: React.FC = () => {
  const pages = [
    {
      name: "仪表板12355",
      path: "/dashboard",
      description: "数据统计和图表展示",
    },
    {
      name: "用户表格4535",
      path: "/user-table",
      description: "用户数据表格管理",
    },
    { name: "表单页面", path: "/form", description: "基础表单组件" },
    { name: "列表页面", path: "/list", description: "文章列表展示" },
    { name: "描述列表", path: "/descriptions", description: "详细信息展示" },
    { name: "模态框表单", path: "/modal-form", description: "弹窗表单" },
    { name: "步骤表单", path: "/steps-form", description: "分步表单" },
    {
      name: "查询过滤器",
      path: "/query-filter",
      description: "表格查询和过滤",
    },
    { name: "文件上传", path: "/upload", description: "文件上传功能" },
    { name: "布局页面", path: "/pro-layout", description: "ProLayout布局" },
    { name: "进度展示", path: "/page1", description: "进度条和统计" },
    { name: "选项表单", path: "/page2", description: "单选和多选表单" },
    { name: "数字输入", path: "/page3", description: "数字和金额输入" },
    { name: "时间选择", path: "/page4", description: "日期时间选择器" },
    { name: "级联选择", path: "/page5", description: "级联和树形选择" },
    { name: "开关滑块", path: "/page6", description: "开关和滑块组件" },
    { name: "评分颜色", path: "/page7", description: "评分和颜色选择" },
    { name: "分段选择", path: "/page8", description: "分段控制器" },
    { name: "条件表单", path: "/page9", description: "条件渲染表单" },
    { name: "分组表单", path: "/page10", description: "表单分组" },
    { name: "时间线", path: "/page11", description: "时间线展示" },
    { name: "警告提示", path: "/page12", description: "各种提示信息" },
    { name: "用户状态", path: "/page13", description: "用户在线状态" },
    { name: "步骤向导", path: "/page14", description: "步骤导航" },
    { name: "折叠面板", path: "/page15", description: "可折叠内容" },
    { name: "标签页", path: "/page16", description: "标签页切换" },
    { name: "日历", path: "/page17", description: "日历组件" },
    { name: "穿梭框", path: "/page18", description: "数据穿梭" },
    { name: "树形结构", path: "/page19", description: "树形数据展示" },
    { name: "抽屉表单", path: "/page20", description: "抽屉式表单" },
    { name: "轮播图", path: "/page21", description: "图片轮播" },
    { name: "卡片展示", path: "/page22", description: "卡片布局" },
    { name: "数据表格", path: "/page23", description: "基础表格" },
    { name: "基础表单", path: "/page24", description: "标准表单" },
    { name: "文章列表", path: "/page25", description: "文章列表展示" },
  ];

  const [randomData, setRandomData] = useState<number[]>([]);

  useEffect(() => {
    console.log("home-container:");

    // 使用lodash的随机函数
    const randomNumbers = _.times(10, () => _.random(1, 100));
    console.log("随机数字:", randomNumbers);

    // 使用lodash的shuffle函数随机打乱页面顺序
    const shuffledPages = _.shuffle([...pages]);
    console.log("打乱后的页面:", shuffledPages.slice(0, 3));

    // 使用lodash的sample函数随机选择页面
    const randomPage = _.sample(pages);
    console.log("随机选择的页面:", randomPage);

    // 使用lodash的chunk函数将页面分组
    const chunkedPages = _.chunk(pages, 5);
    console.log("分组后的页面:", chunkedPages.length, "组");

    // 使用lodash的uniqBy函数去重（基于path）
    const uniquePages = _.uniqBy(pages, "path");
    console.log("去重后的页面数量:", uniquePages.length);

    // 使用lodash的orderBy函数排序
    const sortedPages = _.orderBy(pages, ["name"], ["asc"]);
    console.log("按名称排序的前3个页面:", sortedPages.slice(0, 3));

    // 使用lodash的filter函数过滤
    const filteredPages = _.filter(pages, (page) => page.name.includes("页面"));
    console.log("包含'页面'的页面数量:", filteredPages.length);

    // 使用lodash的map函数转换数据
    const pageNames = _.map(pages, "name");
    console.log("所有页面名称:", pageNames.slice(0, 5));

    // 使用lodash的sumBy函数计算（这里用随机数演示）
    const randomScores = _.times(5, () => ({ score: _.random(60, 100) }));
    const totalScore = _.sumBy(randomScores, "score");
    console.log("随机分数总和:", totalScore);

    // 使用lodash的debounce函数（模拟搜索功能）
    const debouncedSearch = _.debounce((term: string) => {
      const results = _.filter(pages, (page) =>
        _.includes(page.name.toLowerCase(), term.toLowerCase()),
      );
      console.log(`搜索"${term}"的结果:`, results.length, "个");
    }, 300);

    // 模拟搜索调用
    debouncedSearch("页面");

    setRandomData(randomNumbers);
  }, []);
  // 添加Page26-Page50的链接
  for (let i = 26; i <= 50; i++) {
    pages.push({
      name: `页面${i}`,
      path: `/page${i}`,
      description: `第${i}个页面，展示不同组件组合`,
    });
  }

  return (
    <div className={classNames("home-container")}>
      <Title level={1} className={classNames("home-title")}>
        欢迎使用管理系统
      </Title>
      <Paragraph className={classNames("home-desc")}>
        这是一个包含50个页面的管理系统，每个页面都使用了不同的Ant Design和Pro
        Components组件。 点击下面的卡片可以访问对应的页面。
      </Paragraph>

      {randomData.length > 0 && (
        <Paragraph className={classNames("home-desc")}>
          <strong>Lodash演示数据:</strong> 随机数字: {randomData.join(", ")}
        </Paragraph>
      )}

      <Row gutter={[16, 16]} className={classNames("home-row")}>
        {pages.map((page) => (
          <Col
            xs={24}
            sm={12}
            md={8}
            lg={6}
            xl={4}
            key={page.path}
            className={classNames("home-col")}
          >
            <Card
              hoverable
              className={classNames("home-card")}
              style={{ height: "100%" }}
              bodyStyle={{ padding: 12 }}
            >
              <Link to={page.path} className={classNames("home-link")}>
                <Title
                  level={5}
                  style={{ margin: 0, marginBottom: 8 }}
                  className={classNames("home-card-title")}
                >
                  {page.name}
                </Title>
                <Paragraph
                  style={{ fontSize: 12, color: "#666", margin: 0 }}
                  className={classNames("home-card-desc")}
                >
                  {page.description}
                </Paragraph>
              </Link>
            </Card>
          </Col>
        ))}
      </Row>
    </div>
  );
};

export default Home;
